import React from 'react';
import './Login.scss';
import { Button, Form, Input, message } from 'antd';
import { reqLogin } from '../../api/login';
import { useNavigate } from 'react-router-dom';
import { CrownFilled, LockFilled } from '@ant-design/icons';
export default function Login() {
  const navigate = useNavigate();
  const onFinish = async (values) => {
    const { code, token } = await reqLogin(values);
    if (code === '00000') {
      sessionStorage.setItem('token', token);
      message.success('登录成功');
      navigate('/index');
    }
  };
  return (
    <div className="login-container">
      <div className="form">
        <div className="title">
          <span>后台访客管理</span>
        </div>
        <Form name="basic" labelCol={{span: 20}} style={{ maxWidth: 600}} initialValues={{remember: true}} onFinish={onFinish} autoComplete="off">
          <Form.Item name="admin_name" rules={[{required: true,message: '请输入正确的用户名'}]}>
            <Input prefix={<CrownFilled style={{color: '#889aa4',fontSize: 18}} />} placeholder='Username' className="input" />
          </Form.Item>
          <Form.Item name="pwd" rules={[{required: true,message: '请输入正确的密码'}]}>
            <Input.Password prefix={<LockFilled style={{color: '#889aa4',fontSize: 18}}  />} placeholder='Password' className="input" />
          </Form.Item>
          <Form.Item>
            <Button className="login-btn" type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
